
import React, { PureComponent } from 'react';
import { Row, Col, Card } from 'antd';

import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import numeral from 'numeral';

import SVGIDMap from './component/SVGidMap';
import EchartCurve from './component/echartCurve';
import EchartCurveFee from './component/echartCurveFee';
import  EchartHorBar from './component/echartHorBar';
import  EchartHeatBar from './component/echartHeatBar';

import GridContent from '@/components/PageHeaderWrapper/GridContent'
import { ChartCard, MiniArea, MiniBar, MiniProgress } from '@/components/Charts';
import Trend from '@/components/Trend';
import powerdigram from '@/assets/l20010001.svg';


// eslint-disable-next-line react/prefer-stateless-function
class heatDiagram extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      pd: [],
    }
  }

 
 

  render() {
    const {pd}=this.state;
    const chartData={"visitData":[{"x":"2019-04-11","y":7},{"x":"2019-04-12","y":5},{"x":"2019-04-13","y":4},{"x":"2019-04-14","y":2},{"x":"2019-04-15","y":4},{"x":"2019-04-16","y":7},{"x":"2019-04-17","y":5},{"x":"2019-04-18","y":6},{"x":"2019-04-19","y":5},{"x":"2019-04-20","y":9},{"x":"2019-04-21","y":6},{"x":"2019-04-22","y":3},{"x":"2019-04-23","y":1},{"x":"2019-04-24","y":5},{"x":"2019-04-25","y":3},{"x":"2019-04-26","y":6},{"x":"2019-04-27","y":5}],"visitData2":[{"x":"2019-04-11","y":1},{"x":"2019-04-12","y":6},{"x":"2019-04-13","y":4},{"x":"2019-04-14","y":8},{"x":"2019-04-15","y":3},{"x":"2019-04-16","y":7},{"x":"2019-04-17","y":2}],"salesData":[{"x":"1月","y":340},{"x":"2月","y":673},{"x":"3月","y":567},{"x":"4月","y":841},{"x":"5月","y":358},{"x":"6月","y":438},{"x":"7月","y":292},{"x":"8月","y":1185},{"x":"9月","y":1033},{"x":"10月","y":726},{"x":"11月","y":839},{"x":"12月","y":574}],"searchData":[{"index":1,"keyword":"搜索关键词-0","count":496,"range":27,"status":0},{"index":2,"keyword":"搜索关键词-1","count":544,"range":6,"status":1},{"index":3,"keyword":"搜索关键词-2","count":36,"range":30,"status":0},{"index":4,"keyword":"搜索关键词-3","count":979,"range":31,"status":0},{"index":5,"keyword":"搜索关键词-4","count":908,"range":50,"status":1},{"index":6,"keyword":"搜索关键词-5","count":861,"range":80,"status":0},{"index":7,"keyword":"搜索关键词-6","count":560,"range":46,"status":1},{"index":8,"keyword":"搜索关键词-7","count":588,"range":82,"status":1},{"index":9,"keyword":"搜索关键词-8","count":233,"range":76,"status":0},{"index":10,"keyword":"搜索关键词-9","count":271,"range":58,"status":1},{"index":11,"keyword":"搜索关键词-10","count":13,"range":47,"status":0},{"index":12,"keyword":"搜索关键词-11","count":152,"range":28,"status":0},{"index":13,"keyword":"搜索关键词-12","count":48,"range":70,"status":1},{"index":14,"keyword":"搜索关键词-13","count":97,"range":40,"status":1},{"index":15,"keyword":"搜索关键词-14","count":575,"range":26,"status":0},{"index":16,"keyword":"搜索关键词-15","count":594,"range":93,"status":1},{"index":17,"keyword":"搜索关键词-16","count":732,"range":53,"status":0},{"index":18,"keyword":"搜索关键词-17","count":862,"range":99,"status":0},{"index":19,"keyword":"搜索关键词-18","count":799,"range":17,"status":1},{"index":20,"keyword":"搜索关键词-19","count":523,"range":80,"status":0},{"index":21,"keyword":"搜索关键词-20","count":163,"range":79,"status":0},{"index":22,"keyword":"搜索关键词-21","count":570,"range":43,"status":1},{"index":23,"keyword":"搜索关键词-22","count":20,"range":72,"status":1},{"index":24,"keyword":"搜索关键词-23","count":745,"range":99,"status":1},{"index":25,"keyword":"搜索关键词-24","count":725,"range":54,"status":1},{"index":26,"keyword":"搜索关键词-25","count":329,"range":41,"status":1},{"index":27,"keyword":"搜索关键词-26","count":401,"range":10,"status":0},{"index":28,"keyword":"搜索关键词-27","count":175,"range":56,"status":0},{"index":29,"keyword":"搜索关键词-28","count":553,"range":38,"status":0},{"index":30,"keyword":"搜索关键词-29","count":914,"range":93,"status":0},{"index":31,"keyword":"搜索关键词-30","count":875,"range":0,"status":1},{"index":32,"keyword":"搜索关键词-31","count":963,"range":9,"status":1},{"index":33,"keyword":"搜索关键词-32","count":192,"range":1,"status":0},{"index":34,"keyword":"搜索关键词-33","count":738,"range":29,"status":1},{"index":35,"keyword":"搜索关键词-34","count":45,"range":87,"status":0},{"index":36,"keyword":"搜索关键词-35","count":34,"range":64,"status":0},{"index":37,"keyword":"搜索关键词-36","count":362,"range":95,"status":1},{"index":38,"keyword":"搜索关键词-37","count":546,"range":51,"status":0},{"index":39,"keyword":"搜索关键词-38","count":198,"range":31,"status":1},{"index":40,"keyword":"搜索关键词-39","count":157,"range":28,"status":1},{"index":41,"keyword":"搜索关键词-40","count":442,"range":58,"status":0},{"index":42,"keyword":"搜索关键词-41","count":107,"range":16,"status":1},{"index":43,"keyword":"搜索关键词-42","count":628,"range":9,"status":1},{"index":44,"keyword":"搜索关键词-43","count":652,"range":58,"status":1},{"index":45,"keyword":"搜索关键词-44","count":256,"range":13,"status":0},{"index":46,"keyword":"搜索关键词-45","count":241,"range":98,"status":1},{"index":47,"keyword":"搜索关键词-46","count":653,"range":60,"status":0},{"index":48,"keyword":"搜索关键词-47","count":921,"range":88,"status":0},{"index":49,"keyword":"搜索关键词-48","count":873,"range":18,"status":0},{"index":50,"keyword":"搜索关键词-49","count":60,"range":86,"status":0}],"offlineData":[{"name":"Stores 0","cvr":0.7},{"name":"Stores 1","cvr":0.2},{"name":"Stores 2","cvr":0.6},{"name":"Stores 3","cvr":0.9},{"name":"Stores 4","cvr":0.7},{"name":"Stores 5","cvr":0.6},{"name":"Stores 6","cvr":0.7},{"name":"Stores 7","cvr":0.4},{"name":"Stores 8","cvr":0.2},{"name":"Stores 9","cvr":0.7}],"offlineChartData":[{"x":1554943266323,"y1":36,"y2":74},{"x":1554945066323,"y1":80,"y2":32},{"x":1554946866323,"y1":70,"y2":12},{"x":1554948666323,"y1":69,"y2":88},{"x":1554950466323,"y1":44,"y2":66},{"x":1554952266323,"y1":55,"y2":89},{"x":1554954066323,"y1":41,"y2":64},{"x":1554955866323,"y1":69,"y2":12},{"x":1554957666323,"y1":47,"y2":94},{"x":1554959466323,"y1":106,"y2":98},{"x":1554961266323,"y1":86,"y2":79},{"x":1554963066323,"y1":78,"y2":71},{"x":1554964866323,"y1":84,"y2":81},{"x":1554966666323,"y1":81,"y2":50},{"x":1554968466323,"y1":74,"y2":100},{"x":1554970266323,"y1":50,"y2":73},{"x":1554972066323,"y1":56,"y2":87},{"x":1554973866323,"y1":67,"y2":59},{"x":1554975666323,"y1":52,"y2":28},{"x":1554977466323,"y1":85,"y2":16}],"salesTypeData":[{"x":"家用电器","y":4544},{"x":"食用酒水","y":3321},{"x":"个护健康","y":3113},{"x":"服饰箱包","y":2341},{"x":"母婴产品","y":1231},{"x":"其他","y":1231}],"salesTypeDataOnline":[{"x":"家用电器","y":244},{"x":"食用酒水","y":321},{"x":"个护健康","y":311},{"x":"服饰箱包","y":41},{"x":"母婴产品","y":121},{"x":"其他","y":111}],"salesTypeDataOffline":[{"x":"家用电器","y":99},{"x":"食用酒水","y":188},{"x":"个护健康","y":344},{"x":"服饰箱包","y":255},{"x":"其他","y":65}],"radarData":[{"name":"个人","label":"引用","value":10},{"name":"个人","label":"口碑","value":8},{"name":"个人","label":"产量","value":4},{"name":"个人","label":"贡献","value":5},{"name":"个人","label":"热度","value":7},{"name":"团队","label":"引用","value":3},{"name":"团队","label":"口碑","value":9},{"name":"团队","label":"产量","value":6},{"name":"团队","label":"贡献","value":3},{"name":"团队","label":"热度","value":1},{"name":"部门","label":"引用","value":4},{"name":"部门","label":"口碑","value":1},{"name":"部门","label":"产量","value":6},{"name":"部门","label":"贡献","value":5},{"name":"部门","label":"热度","value":7}]};

    return (
      <GridContent>
        <Row gutter={24} style={{ marginBottom: 16 }}>
          <Col sm={12} xs={24} md={6}>
            <ChartCard
              bordered={false}
              title="系统负荷"
              total="78%"
              footer={
                <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
                  <Trend flag="up" style={{ marginRight: 16 }}>
                    <FormattedMessage id="app.analysis.week" defaultMessage="Weekly Changes" />
                    <span>12%</span>
                  </Trend>
                  <Trend flag="down">
                    <FormattedMessage id="app.analysis.day" defaultMessage="Weekly Changes" />
                    <span>11%</span>
                  </Trend>
                </div>
              }
              contentHeight={46}
            >
              <MiniProgress
                percent={78}
                strokeWidth={8}
                target={80}
                targetLabel={`${formatMessage({ id: 'component.miniProgress.tooltipDefault' }).concat(
                  ': '
                )}80%`}
                color="#13C2C2"
              />
            </ChartCard>

          </Col>
          <Col sm={12} xs={24} md={6}>

            <ChartCard
              bordered={false}
              title="负荷预测"
              total={`${numeral(6560).format('0,0')  }Kw`}
              footer={
                <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
                  <span style={{ marginRight: 16 }}>分辨率:15min</span>
                  <span>当前功率:5170Kw</span>
                </div>
              }
              contentHeight={46}
            >
              <MiniBar data={chartData.visitData} />

            </ChartCard>
          </Col>
          <Col sm={12} xs={24} md={6}>
            <ChartCard
              bordered={false}
              title="运行时间"
              total={
                <div><span><small>今年</small>{numeral(8846).format('0,0')}</span></div>}
              footer={
                <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
                  <Trend flag="up" style={{ marginRight: 16 }}>
                    <span>上周332h</span>
                  </Trend>
                  <Trend flag="down">
                    <span>本周132h</span>
                  </Trend>
                </div>
              }

              contentHeight={46}
            >
              <MiniArea color="#975FE4" data={chartData.visitData} />
            </ChartCard>
          </Col>
          <Col sm={12} xs={24} md={6}>
            <ChartCard
              bordered={false}
              title="运维信息"
              total={<div>下次巡检：16:00 </div>}
              footer={
                <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
                  <span style={{ marginRight: 16 }}>
                    上次巡检:9:00,正常
                  </span>
                </div>
              }
              contentHeight={46}
            >
              <span style={{ marginRight: 16 }}>
                上次检修:2019/1/1
              </span>
              <span>
                下次检修:2019/6/1
              </span>
            </ChartCard>
          </Col>
        </Row>
        <Row gutter={24} style={{ marginBottom: 16 }} align="bottom" >

          <Card title="系统图"  style={{padding:'0'}}>
            <Row gutter={24}  style={{margin:'0'}}>
              <Col sm={24} xs={24} md={16} style={{margin:'0'}}>
              <SVGIDMap id="power_diagram_1230" width="800px" height="600px" svg={powerdigram}  />
              </Col>
              <Col sm={24} xs={24} md={8}>
               
              </Col>
            </Row>
          </Card>
        </Row>

        <Row gutter={24} style={{ marginBottom: 16 }}>
          <Col sm={24} xs={24} md={12}>
            <Card title="负荷预测">
              <EchartCurve id="paiming23" />
            </Card>
          </Col>
          <Col sm={24} xs={24} md={12}>
            <Card title="实时负荷">
              <EchartCurve id="paiming13" />
            </Card>
          </Col>


        </Row>
        <Row gutter={24} style={{ marginBottom: 16 }}>
          <Col sm={24} xs={24} md={8}>
            <Card title="电耗排名">
              <EchartHorBar id="paiming1" />
            </Card>
          </Col>
          <Col sm={24} xs={24} md={16}>
            <Card title="制冷费用">
              <EchartCurveFee id="paiming12"  />
            </Card>
          </Col>
        </Row>
        <Row gutter={24} style={{ marginBottom: 16 }}>
          <Col sm={24} xs={24} md={24}>
            <Card title="温度热力图">
              <EchartHeatBar id="paiming134" />
            </Card>
          </Col>
        </Row>
      </GridContent>
    );
  }
}

export default heatDiagram;
